<template>
	<view>
		<!-- 积分 -->
		<view class="top">
			<view class="box">
				我的积分 &nbsp;&nbsp;&nbsp;<span style='color: #8fc31f; '>
					{{this.data.integral}}
				</span>
			</view>
		</view>
		<div class="con">
			<el-input :min="100" v-model="number1" type="number" @change='panduan' @input='onchange' :clearable='true'
				placeholder="输入积分(大于100)"></el-input>
		</div>
		<div class="con">
			<view class="num" v-if="this.number2 == ''">
				到我的钱包
			</view>
			<view class="num" v-else>
				到我的钱包{{this.number2}}元
			</view>
		</div>
		<view class="btn">
			<view class="text" @click="huan">
				确认兑换
			</view>

		</view>
	</view>
</template>``

<script>
	export default {
		data() {
			return {
				number1: '',
				number2: '',
				data: []
			};
		},
		onShow() {
			this.getdata()
		},
		methods: {
			panduan() {
				if (this.number1 < 100) {
					uni.showToast({
						title: '积分兑换最少为100哦~	',
						icon: 'none'
					})
					this.number1 = ''
					this.number2 = ''
				}
			},
			onchange() {
				if (this.number1 > Number(this.data.integral)) {
					uni.showToast({
						title: '您并没有那么多积分哦~	',
						icon: 'none'
					})
					this.number1 = ''
					this.number2 = ''
				} else {
					this.number2 = this.number1 / 100
				}

			},
			getdata() {
				this.$api.getpsxintegral().then(res => {
					this.data = res.data[0]
					console.log(this.data);
				})
			},
			huan() {
				if (this.number1 == '') {
					uni.showToast({
						title: '请填写兑换的积分	',
						icon: 'none'
					})
				} else {
					let data = {
						id: this.data.id,
						integral: this.data.integral -= this.number1
					}
					this.$api.putpsxintegral(data).then(res => {
						console.log(res);
					})
					this.$api.addpsxdetil({
						detil: "-"+this.number1
					}).then(res => {
						console.log(res);
						this.number1 = ''
						this.number2 = ''
						this.getdata()
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.el-input__inner .el-input {
		// width: 100% !important;
		height: 100% !important;
	}

	.btn {
		width: 710rpx;
		height: 88rpx;
		background-color: #8fc31f;
		border: solid 1rpx #bababa;
		// margin-top: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 50rpx auto 0;

		.text {
			width: 150rpx;
			height: 31rpx;
			font-family: YouYuan;
			font-size: 32rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0rpx;
			color: #fafafa;
		}
	}

	.con {
		width: 100%;
		height: 79rpx;
		background-color: #fafafa;
		box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(34, 24, 21, 0.15);
		// border: solid 1rpx #d7d7d7;
		margin-top: 40rpx;
		display: flex;
		align-items: center;

		.num {
			// width: 158rpx;
			height: 31rpx;
			font-family: YouYuan;
			font-size: 32rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0rpx;
			color: #909090;
			margin-left: 30rpx;
		}

	}

	.top {
		width: 100%;
		height: 218rpx;
		background-color: #fafafa;
		box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(34, 24, 21, 0.15);
		border: solid 1rpx #d7d7d7;
		display: flex;
		align-items: center;
		justify-content: center;

		.box {
			// width: 159rpx;
			height: 38rpx;
			font-family: YouYuan;
			font-size: 40rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0rpx;
			color: #171717;

		}
	}
</style>
